<template>
  <div :class="['flex', direction]" @click="onClick">
    <slot></slot>
  </div>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

  @Component
  export default class TcFlex extends Vue{
    @Prop({ default: 'row' })
    direction: 'column' | 'row'

    onClick () {
      this.$emit('click')
    }
  }
</script>


<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
  
  .flex-fl{
    flex: 1;
  }
}
.column{
  flex-direction: column;
}
.row{
  flex-direction: row;
}
</style>
